<style scoped >
</style>
<template>
    <div class="console-product">
        <!--头部-->
        <Row class="position">
            <i-col span="24">
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">业务中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">衬衣领子</span>
                </div>
            </i-col>
        </Row>
        <!--头部结束-->
        <!--主体部分-->
        <div class="console-product-contcent invoice" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" ref="shirtForm" :model="shirtForm" inline>
                <Form-item label="计划单号:" :label-width="65" style="width: 190px;">
                    <Input v-model="shirtForm.sczsbh" placeholder="" @on-enter="shirtSearch"></Input>
                </Form-item>
                <Form-item label="服装类别:" :label-width="65" style="width: 190px;">
                    <Select v-model="shirtForm.fzfl" filterable  placeholder="服装类别">
                        <Option v-for="item in jhdlb" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="日期:" :label-width="35" style="width: 160px;">
                    <Date-picker type="date" v-model="shirtForm.scxdrq" placeholder="选择日期"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="shirtSearch">搜索</Button>
                </Form-item>
            </Form>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" ref="shirtTable" stripe border :columns="shirtColumns" :data="shirtData" ></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
        <Modal v-model="errorModal" class-name="popup" width="500" @on-cancel="cancelError" :mask-closable="false">
            <p slot="header" v-drag>
                <span style="color:#fff" >错误提示</span>
            </p>
            <div class="center">
                {{errorData}}
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,//加载
                errorModal:false,
                errorData:"",
                //搜索
                shirtForm:{
                    sczsbh:'',
                    scxdrq:new Date(),
                    fzfl:'C'
                },
                //服装类别
                jhdlb:[
                    {
                        value:'C',
                        label:'衬衣计划单'
                    },
                    {
                        value:'X',
                        label:'西服计划单'
                    }
                ],
                //衬衣领子表格数据
                shirtColumns:[
                    {
                        width:'10%',
                        title:'计划单号',
                        key:'sczsbh',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.sczsbh,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.sczsbh)]);
                        }
                    },
                    {
                        width:'12%',
                        title:'下达日期',
                        key:'scxdrq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.scxdrq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.scxdrq)]);
                        }
                    },
                    {
                        width:'12%',
                        title:'投产日期',
                        key:'sctcrq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.sctcrq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.sctcrq)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'裁剪交期',
                        key:'sccjjq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.sccjjq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.sccjjq)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'缝制交期',
                        key:'scfzjq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.scfzjq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.scfzjq)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'整烫交期',
                        key:'scztjq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.scztjq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.scztjq)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'包装交期',
                        key:'scbzjq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.scbzjq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.scbzjq)]);
                        }
                    },
                    {
                        width:'8%',
                        title:'交货日期',
                        key:'scjhrq',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.scjhrq,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.scjhrq)]);
                        }
                    },
                    {
                        width:'8%',
                        title:'操作',
                        key:'id',
                        render: (h, params) => {
                            return h('div', [
                                (localStorage.getItem(params.row.sczsbh) == null && params.row.where == "") ? h('Button',
                                    {
                                        class:"green",
                                        on: {
                                            click: () => {
                                                this.exportShirt(params.row)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-daochuzhangdan'
                                        }),
                                        h("span",'导出')
                                    ]):h("span",'成功')
                            ]);
                        }
                    }
                ],
                shirtData:[]
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth>1600){
                this.pageSize=20;
            }
            this.shirtData = this.shirtTableData(this.shirtForm,this.currentPage,this.pageSize);
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            shirtTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var sczsbh = formData.sczsbh;//计划单号
                var scxdrq = formData.scxdrq;//下达日期
                var jhdlb = formData.fzfl;//服装类别
                if(scxdrq != "" && scxdrq != null){
                    var Time = (new Date(scxdrq)).getTime();
                    scxdrq = new Date(Time).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        sczsbh : sczsbh,
                        scxdrq : scxdrq,
                        jhdlb : jhdlb
                    }
                };
                axios.get('/tjhds',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.shirtData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            shirtSearch(){
                this.currentPage = 1;
                this.shirtData = this.shirtTableData(this.shirtForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.shirtData = this.shirtTableData(this.shirtForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.shirtData = this.shirtTableData(this.shirtForm,this.currentPage,this.pageSize);
            },
            exportShirt(row){
                const msg = this.$Message.loading({
                    content: '处理中',
                    duration: 0
                });
                axios.get('/tjhds/'+row.sczsbh+'/export').then(res => {
                    this.shirtData[row._index].where = "1";//自定义字段 导出成功传1 默认是空字符串
                    localStorage.setItem(row.sczsbh,"成功");
                    setTimeout(msg,500);
                }).catch(err =>{
                    this.errorModal = false;
                    this.errorData = err;
                    setTimeout(msg, 500);
                })
            },
            cancelError(){
                this.errorModal = false;
                this.errorData = "";
            }
        }
    }
</script>